<template>
    <!-- 人员管理-实名制-人员审批 -->
    <div class="empApprove">
        <div class="top">
            <Tabs v-model="tabActiveName" @on-click="setTabClick">
                <TabPane :label="`全部 （${ allNum>99?'99+':allNum}）`" name="-1"></TabPane>
                <TabPane :label="`待审批 （${pendingNum>99?'99+':pendingNum}）`" name="0"></TabPane>
                <TabPane :label="`已通过 （${successNum>99?'99+':successNum}）`" name="1"></TabPane>
                <TabPane :label="`已拒绝 （${failNum>99?'99+':failNum}）`" name="2"></TabPane>
            </Tabs>
            <div class="right">
                <div class="item">
                    <span style="margin-right:8px;">申请时间：</span>
                    <DatePicker
                        type="daterange"
                        :options="options"
                        :clearable="false"
                        v-model="dateArr"
                        v-if="inputShow"
                        format="yyyy-MM-dd"
                        placement="top"
                        transfer
                        placeholder="请选择日期"
                        style="width: 300px;"
                        @on-change="getDateArr">
                    </DatePicker>
                    <DatePicker
                        type="daterange"
                        format="yyyy-MM-dd"
                        placement="top"
                        placeholder="请选择日期"
                        v-if="inputShow"
                        style="opacity:0;position: absolute;top:-9999px;width:1px;">
                    </DatePicker>
                </div>
            </div>
        </div>
        <div class="bottom">
            <el-table :data="list" :stripe="true">
                <el-table-column label="头像" align="center" width="80px">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.avatar?scope.row.avatar:src" style="display:block;width:30px;height:30px;border-radius:50%;margin:auto;" :preview-src-list="[scope.row.avatar]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="empName" label="姓名" align="center"></el-table-column>
                <el-table-column label="性别" align="center">
                    <template slot-scope="scope">
                        <p v-if="scope.row.gender == 1" style="color:#0058F9;">男</p>
                        <p v-if="scope.row.gender == 2" style="color:#059202;">女</p>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="年龄" align="center"></el-table-column>
                <el-table-column prop="groupName" label="班组" align="center"></el-table-column>
                <el-table-column prop="workTypeName" label="工种" align="center"></el-table-column>
                <el-table-column label="申请时间" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime ? scope.row.createTime : '--' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <p v-if="scope.row.checkResult === 0" style="color:#FF4848;">待审批</p>
                        <p v-if="scope.row.checkResult === 1" style="color:#28D79C;">已通过</p>
                        <p v-if="scope.row.checkResult === 2" style="color:#A9B0BB;">已拒绝</p>
                    </template>
                </el-table-column>
                <el-table-column prop="checkName" label="审批人" align="center">
                    <template slot-scope="scope">
                        <p>{{ scope.row.checkName ? scope.row.checkName : '—' }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="checkTime" label="审批时间" align="center">
                    <template slot-scope="scope">
                        <p>{{ scope.row.checkTime ? scope.row.checkTime : '—' }}</p>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <!-- :disabled='scope.row.state == 0 && btnList.includes("emp/approve/visitor") ? false : true' -->
                        <el-button
                            @click="showVisitorFn(scope.$index,scope.row)"
                            :disabled="scope.row.checkResult == 0? false : true || !btnList.includes('emp/approve/deal')"
                            type="text"
                            size="small"
                            v-preventReClick="1500"
                            style="color:#0058F9;">
                            审批
                        </el-button>
                        
                        <el-button
                            @click="removeRow( scope.$index,scope.row)"
                            :disabled="!btnList.includes('emp/approve/delete')"
                            type="text"
                            size="small"
                            v-preventReClick="1500" style="color:#FB0035;">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="clearfix"  >
                <div class="float-right">
                    <Page
                        style="margin: 20px 0;text-align: center;"
                        :current.sync="current"
                        :total="totalCount"
                        :page-size="pageSize"
                        show-elevator
                        show-total
                        @on-change="pageChange">
                    </Page>
                </div>
            </div>
        </div>

        <!-- 删除弹框 -->
        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="deteleFn" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <!-- 审批弹框 -->
        <Modal v-model="Modal" title="访客审批" width="1000px;" :mask-closable="false">
            <div class="wrap">
                <div class="Modal_box_L">
                    <div class="top">
                        <div class="title">基本信息</div>
                        <div class="list" style="margin-bottom: 16px;">
                            <div class="item">
                                <span>姓名:</span>
                                <span>{{ personnelList.empName }}</span>
                            </div>
                            <div class="item">
                                <span>性别:</span>
                                <span v-if="personnelList.gender == 1">男</span>
                                <span v-if="personnelList.gender == 2">女</span>
                            </div>
                            <div class="item">
                                <span>民族:</span>
                                <span>{{ personnelList.nation }}</span>
                            </div>
                            <div class="item">
                                <span>年龄:</span>
                                <span>{{ personnelList.age }}</span>
                            </div>
                            <div class="item">
                                <span>身份证号:</span>
                                <span>{{ personnelList.idCardNo }}</span>
                            </div>
                            <div class="item">
                                <span>发证机关:</span>
                                <span>{{ personnelList.idCardGrantOrg }}</span>
                            </div>
                            <div class="item">
                                <span>住址:</span>
                                <span>{{ personnelList.address }}</span>
                            </div>
                            <div class="item">
                                <span>有效期:</span>
                                <span>{{ personnelList.idCardStartDate }}至{{ personnelList.idCardEndDate }}</span>
                            </div>
                        </div>
                        <div class="title">项目信息</div>
                        <div class="list">
                            <div class="item" style="margin-bottom:20px;">
                                <span><i>*</i>班组:</span>
                                <Select v-model="groupId" placeholder="请选择班组" style="width:200px" filterable>
                                    <Option v-for="(item,index) in groupEmpList" :value="item.groupId" :key="index">{{ item.groupName }}</Option>
                                </Select>
                            </div>
                            <div class="item" style="margin-bottom:10px;">
                                <span><i>*</i>工人类型:</span>
                                <el-radio-group v-model="workerVal" @change="changeWorkerRole">
                                    <el-radio :label="1">施工人员</el-radio>
                                    <el-radio :label="2">管理人员</el-radio>
                                </el-radio-group>
                            </div>
                            <div class="item" style="margin-bottom:20px;">
                                <span><i>*</i>工种:</span>
                                <Select v-model="workTypeId" style="width:200px" placeholder="请选择工种" @on-change="getworkType" filterable>
                                    <Option v-for="item in workTypelist" :value="item.workTypeId" :key="item.workTypeId">{{ item.workTypeName }}</Option>
                                </Select>
                            </div>
                            <div class="item" style="margin-bottom:10px;">
                                <span><i>*</i>入职时间:</span>
                                <DatePicker type="date" placeholder="请选择证件结束有效期" style="width: 200px" v-model="enterTime" :clearable="false"></DatePicker>
                            </div>
                        </div>
                    </div>
                    <div class="btom">
                        <div class="title">审批结果</div>
                        <div class="list" style="margin-top:17px;">
                            <div class="item">
                                <span><i>*</i>审批结果：</span>
                                <el-radio-group v-model="resultValue" @change="changeResult">
                                    <el-radio :label="1">保存通过并录入人员</el-radio>
                                    <el-radio :label="2">拒绝</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Modal_box_R">
                    <div class="top">
                        <div class="title">其他信息</div>
                        <div class="img_box">
                            <img :src="personnelList.avatar?personnelList.avatar:src" alt="">
                        </div>
                    </div>
                    <div class="btom">
                        <div class="left">
                            <img :src="personnelList.headImg?personnelList.headImg:src" alt="">
                        </div>
                        <div class="right">
                            <img :src="personnelList.idCardFront?personnelList.idCardFront:src" alt="">
                            <img :src="personnelList.idCardBack?personnelList.idCardBack:src" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submit" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <div class="previewImgModal" v-if="previewImgModal">
            <span class="close" @click="previewImgClose">
                <Icon type="ios-close-circle" style="color:#fff;font-size:24px;"/>
            </span>
            <img :src="previewImg" />
        </div>
    </div>
</template>

<script>

import {format, GetallDate, initYMD, formatInItDate} from "@/sever/utils.js";
import {previewImg} from "@/mixins/previewImg.js"
import {GroupCreate} from "@/mixins/group.js"
import {
    getapplyList,
    getapplyDetail,
    getapplyCheck,
    getEmpapproveNum,
    getDel,
} from "@/api/api.js";

export default {
    mixins: [GroupCreate, previewImg],
    data() {
        return {
            src: require("./../../assets/images/common/noPeo.png"),
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: 0,
            deptId: "",
            btnList: [],
            tabActiveName: "-1",
            allNum: 0,
            pendingNum: 0,
            successNum: 0,
            failNum: 0,
            dateArr: [new Date(new Date().getTime() - 2592000000), new Date(new Date().getTime())],
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            inputShow: false,
            list: [],
            deleteModal: false,
            Modal: false,
            resultValue: 1, //审批结果
            workTypearr: [
                {
                    value: '1',
                    label: '安全管理'
                },
                {
                    value: '2',
                    label: '勘察管理'
                },
            ], //工种
            workTypeId: '1',
            workTypeValName: '',

            //工人类型
            workTypeName: '',
            workerVal: 1,

            //班组
            groupId: '',
            groupName: '',

            enterTime: '',
            empId: '',
            personnelList: {},
            deleteId: '',
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.dateArr = [new Date(new Date().getTime() - 2592000000), new Date(new Date().getTime())];
                this.getAllList();
                this.getGroupAllList();
                this.getworkTypeList(this.deptId)
            }
        },
    },
    methods: {
        //根据项目获取班组
        getGroupAllList() {
            this.getGRPList(this.deptId)
        },
        getEmpapproveNum() {
            let parmas = {
                deptId: this.deptId,
                startTime: initYMD(this.dateArr[0]),
                endTime: initYMD(this.dateArr[1])
            };
            getEmpapproveNum(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.allNum = res.data.allNum;
                        this.pendingNum = res.data.pendingNum;
                        this.successNum = res.data.successNum;
                        this.failNum = res.data.faiNum;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        headClass() {
            return 'color: #666666;background: #CCDEEE !important;'
        },
        setTabClick(name) {
            this.pageNum = 1;
            this.current = 1;
            this.tabActiveName = name;
            this.getAllList();
        },
        getDateArr(i, v) {
            this.dateArr = i;
            this.getAllList();
        },
        getAllList() {
            this.totalCount = 0;
            let parmas = {
                deptId: this.deptId,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                state: this.tabActiveName == -1 ? '' : this.tabActiveName,
                startTime: initYMD(this.dateArr[0]),
                endTime: initYMD(this.dateArr[1])
            }
            getapplyList(parmas).then(res => {
                if (res.code == 200) {
                    this.list = res.data.list;
                    this.totalCount = res.data.total;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error);
            });
        },
        pageChange(index) {
            this.pageNum = index
            this.getAllList();
            this.getEmpapproveNum();
        },
        //审批
        showVisitorFn(index, rows) {
            this.enterTime = ""
            this.groupId = ""
            this.workerVal = ''
            this.workTypeValName = ''
            this.workTypeId = ''
            this.workTypeName = ''
            this.personnelList = {}
            this.empId = rows.empId
            this.getapplyDetail(rows.empId)
            this.Modal = true
        },
        getapplyDetail(id) {

            let parmas = {
                empId: id
            }
            getapplyDetail(parmas).then(res => {
                if (res.code == 200) {
                    this.personnelList = res.data
                    this.groupId = res.data.groupId
                    this.workerVal = res.data.workRoleId
                    this.workTypeValName = res.data.workRoleName
                    this.workTypeId = res.data.workTypeId
                    this.workTypeName = res.data.workTypeName
                    this.enterTime = res.data.enterTime
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error);
            });
        },
        //删除
        removeRow(index, rows) {
            this.deleteModal = true
            this.deleteId = rows.empId
        },
        //弹框删除
        deteleFn() {
            getDel(this.deleteId).then(res => {
                if (res.code == 200) {
                    this.$Message.success("删除成功!");
                    this.deleteModal = false
                    this.getAllList();
                    this.getEmpapproveNum();
                } else {
                    this.$Message.warning(res.msg);
                    this.deleteModal = false
                }
            })
        },
        cancel(type) {
            if (type == 1) {
                this.deleteModal = false
            }
            if (type == 2) {
                this.Modal = false
            }
        },
        //审批提交
        submit() {
            this.groupEmpList.forEach(i => {
                if (this.groupId == i.groupId) {
                    this.groupName = i.groupName;
                }
            })
            if (!this.groupId) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择班组",
                });
                return;
            }
            if (this.workTypeId == '' || this.workTypeId == undefined) {
                this.$Modal.warning({
                    title: "提示",
                    content: "工种不能为空，请选择工种！"
                });
                return;
            }
            if (this.enterTime == '' || this.enterTime == undefined) {
                this.$Modal.warning({
                    title: "提示",
                    content: "请选择入职时间"
                });
                return;
            }
            let parmas = {
                empId: this.empId,
                groupId: this.groupId,
                groupName: this.groupName,
                workTypeId: this.workerVal,//工人类型
                workTypeName: this.workTypeName,
                workRoleId: this.workTypeId, //工种
                workRoleName: this.workTypeValName,
                enterTime: format(this.enterTime, "YYYY-MM-DD"),
                checkResult: this.resultValue,
            }
            this.$confirm('您确定要提交此审批申请?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                getapplyCheck(parmas).then(res => {
                    if (res.code == 200) {
                        this.Modal = false
                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        });
                        this.getAllList();
                        this.getEmpapproveNum();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
            }).catch(() => {
                this.Modal = false
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        //选择班组
        changeGroup(val) {
            this.groupId = val
        },
        //选择工人类型
        changeWorkerRole(val) {
            this.workerVal = val
            if (val == 1) {
                this.workTypeName = "施工人员"
            }
            if (val == 2) {
                this.workTypeName = "管理人员"
            }
        },
        //选择工种
        getworkType(index) {
            this.workTypelist.find((i) => {
                if (i.workTypeId == index) {
                    this.workTypeValName = i.workTypeName;
                }
            });
        },
        changeResult(val) {
            this.resultValue = val
        }
    },
    beforeDestroy() {
        if (localStorage.getItem('logTime')) {
            localStorage.removeItem('logTime')
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getAllList();
        this.getEmpapproveNum();
        this.getGroupAllList();
        this.getworkTypeList(this.deptId)
        setTimeout(() => {
            this.inputShow = true;
        }, 1)
    }
};
</script>


<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
/deep/ .el-input__inner {
    height: 30px;
    line-height: 30px;
}

i {
    color: red;
    margin-right: 5px;
}

.empApprove {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;

    .top {
        width: 100%;
        height: 72px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 30px;
    }

    .bottom {
        width: 100%;
        background: #fff;
        border-radius: 10px;
        padding: 20px;
        margin-top: 10px;
    }
}

/deep/ .ivu-tabs-nav .ivu-tabs-tab {
    padding: 18px 16px !important;
}

.wrap {
    display: flex;
    align-items: center;

    .Modal_box_L {
        width: 50%;

        .top, .btom {
            width: 100%;
            height: auto;
            padding: 10px;
            background: #FFFFFF;
            border: 1px solid #BFBFBF;
            border-radius: 6px;

            .list {
                padding: 0px 10px;
                border-bottom: 1px solid #BFBFBF;

                .item {
                    height: 30px;

                    span:first-child {
                        width: 90px;
                        display: inline-block;
                    }
                }
            }
        }

        .btom {
            margin-top: 10px;
            padding-bottom: 23px;
        }
    }

    .title {
        height: 30px;
        margin-bottom: 10px;
        border-bottom: 3px solid #E1EAFA;
        font-weight: 400;
        font-size: 14px;
        color: var(--themeColor);
    }

    .Modal_box_R {
        width: 50%;
        border: 1px solid #BFBFBF;
        border-radius: 6px;
        padding: 10px;
        margin-left: 10px;

        .top {
            width: 100%;
            border-bottom: 1px solid #BFBFBF;

            .img_box {
                width: 150px;
                height: 150px;
                margin: 50px auto;
                border: 1px solid #BFBFBF;
                border-radius: 50%;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .btom {
            display: flex;
            padding: 10px;
            box-sizing: border-box;

            .left {
                width: 150px;
                height: 130px;
                border: 1px solid #BFBFBF;
                margin: 24% auto;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .right {
                display: flex;
                flex-direction: column;
                margin-left: 10px;

                img:first-child {
                    width: 311px;
                    height: 165px;
                    border: 1px solid #BFBFBF;
                    margin-bottom: 10px;
                }

                img:last-child {
                    width: 311px;
                    height: 165px;
                    border: 1px solid #BFBFBF;
                }
            }
        }
    }
}
</style>
